<template>
  <div>
    <div v-for="(order,index) in orders" :key="index" class="card flex-row">
      <o-card :card="order|formateCard" ></o-card>
        <div class="flex-column flex-item-24 flex-right">
          <div class="flex-column">
            <button class="again page-color" @click="again(index)">再来一单</button>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  let AV = require('leancloud-storage/live-query')
  import OCard from '@/components/card'
  import {formateTime} from '@/utils/wxTool'
  export default {
    data() {
      return {
        limit:10,
        page:1,
        orders: [],
        // key: value
      }
    },
    filters: {
      formateCard: function(card) {
        return {
          menu: card.foodList,
          time: formateTime(card.createdAt),
          userSpeak: card.userSpeak,
          status: card.payStatus=='未支付'?'未支付':card.dealStatus,
          amount: card.amount,
        }
      },
    },
    components: {OCard},
    methods: {
      again(index) {
        let order = this.orders[index]
        this.$store.commit('setMenu', order.foodList)
        wx.navigateTo({
          url: '/pages/product/main'
        })
      },
      async getOrder(loadMore) {
        if (loadMore) {
          this.page +=1
        } else {
          this.page =1
        }
        let query = new AV.Query('order')
        query.limit(this.limit).descending('createdAt')
        query.skip((this.page-1)*this.limit)
        let orders = await query.find().catch(err=>{
          console.log(err)
          this.$showToast({icon:'none',content:'未完成,请稍后重试'})
        })
       
        if (!orders) return Promise.reject('err')
        if (loadMore) {
          this.orders.push(...orders.map(item=>item.toJSON()))
        } else {
          this.orders = orders.map(item=>item.toJSON())
        }
        return Promise.resolve('success')
      }
    },
    onLoad() {
      this.getOrder()
    },
    async onPullDownRefresh() {
      let err = ''
      let res = await this.getOrder().catch(errMsg=> {
        err = errMsg
      })
      if(!err) {
        setTimeout(() => {
          wx.stopPullDownRefresh()
        }, 1000);
      } else {
        setTimeout(() => {
          wx.stopPullDownRefresh()
        }, 3000);
      }
    },
    onReachBottom() {
      this.getOrder(true)
    }
  }
</script>

<style scoped>
.card {
  margin: 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  position: relative;
}
.again {
  position: absolute;
  right: 6px;
  bottom: 18px;
  display: inline-block;
  font-size: 13px;
  color: #fff;
  padding: 7px 15px;
  line-height: 1;
  border-radius: 0;
  border: none;
  border-radius: 10px;
  /* background: rgba(105, 199, 68,.8); */
}
</style>